import React, {Component} from 'react'
import {FlatList, Dimensions, Text, TouchableOpacity, View, Image, ScrollView} from "react-native";
import ScrollableTabView, {DefaultTabBar} from "react-native-scrollable-tab-view";

export default class ItemListPage extends Component {
    constructor() {
        super();
        this.state = {
            categoryList: [
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "夹克外套",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "毛衣/衫",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "卫衣",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "羽绒服",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "牛仔裤",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "大衣",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "休闲裤",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "休闲套装",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "西装",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "背心马甲",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "T恤",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "POLO衫",
                    id: new Date().getMilliseconds()
                },
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "衬衫",
                    id: new Date().getMilliseconds()
                },
            ],
            itemList: [
                {
                    avatar: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    nickname: "苹果青春版 XR",
                    lastMessage: "苹果A12处理器，超强性能",
                },
                {
                    avatar: "https://img.alicdn.com/bao/uploaded/TB2PSBFhY_I8KJjy1XaXXbsxpXa_!!2185315568-0-beehive-scenes.jpg_360x360xzq90.jpg",
                    nickname: "吧台",
                    lastMessage: "今天读书了吗？",
                },
                {
                    avatar: "https://img.alicdn.com/tps/i2/TB1FA1kKXXXXXalXVXXgrdL_XXX-980-980.jpg_350x350q90.jpg",
                    nickname: "包包",
                },
                {
                    avatar: "https://g-search2.alicdn.com/img/bao/uploaded/i4/i3/4005211794/O1CN01BGsvvH1P7h19dTCOy_!!0-item_pic.jpg_460x460Q90.jpg",
                    nickname: "丹尼尔",
                },
                {
                    avatar: "https://img.alicdn.com/bao/uploaded/TB2kw0Al46I8KJjSszfXXaZVXXa_!!2504805576-0-beehive-scenes.jpg_360x360xzq90.jpg",
                    nickname: "绿联转接头",
                }, {
                    avatar: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    nickname: "苹果青春版 XR",
                    lastMessage: "苹果A12处理器，超强性能",
                },
                {
                    avatar: "https://img.alicdn.com/bao/uploaded/TB2PSBFhY_I8KJjy1XaXXbsxpXa_!!2185315568-0-beehive-scenes.jpg_360x360xzq90.jpg",
                    nickname: "吧台",
                    lastMessage: "今天读书了吗？",
                },
                {
                    avatar: "https://img.alicdn.com/tps/i2/TB1FA1kKXXXXXalXVXXgrdL_XXX-980-980.jpg_350x350q90.jpg",
                    nickname: "包包",
                },
                {
                    avatar: "https://g-search2.alicdn.com/img/bao/uploaded/i4/i3/4005211794/O1CN01BGsvvH1P7h19dTCOy_!!0-item_pic.jpg_460x460Q90.jpg",
                    nickname: "丹尼尔",
                },
                {
                    avatar: "https://img.alicdn.com/bao/uploaded/TB2kw0Al46I8KJjSszfXXaZVXXa_!!2504805576-0-beehive-scenes.jpg_360x360xzq90.jpg",
                    nickname: "绿联转接头",
                }
            ],
        }
    }

    render() {
        return (

            <View style={{
                flex: 1, backgroundColor: "#fff"
            }}>
                {this.getFlatlist()}
            </View>


        )
    }

    getFlatlist = () => {
        return (
            <FlatList
                // horizontal={true}
                numColumns={2}
                data={this.state.itemList}
                renderItem={({item}) =>

                    <TouchableOpacity onPress={() => alert(item.nickname)}>
                        <View style={{
                            backgroundColor: "#eeeeee",
                        }}>
                            <View style={{
                                flex: 1,
                                minHeight: 200,
                                maxHeight: 400,
                                marginBottom: 10,
                                margin: 5,
                                // flexDirection: 'row',
                                backgroundColor: "#fff",
                                borderBottomColor: "#eee",
                                borderBottomWidth: 1,
                                borderRadius: 2,
                            }}

                            >
                                <Image source={{uri: item.avatar}}
                                       style={{
                                           width: Dimensions.get("window").width / 2 - 20,
                                           height: Dimensions.get("window").width / 2 - 20,
                                           borderRadius: 2,
                                           backgroundColor: "#fa0"
                                       }}/>
                                <View style={{minHeight: 60, paddingTop: 10}}>
                                    <View style={{
                                        height: 25,
                                        marginLeft: 10,
                                        marginRight: 10,
                                        paddingBottom: 5,
                                        justifyContent: "flex-end"
                                    }}>
                                        <Text style={{
                                            fontSize: 13,
                                            overflow: "hidden",
                                            width: Dimensions.get("window").width / 2 - 40
                                        }}>{item.nickname}</Text>
                                    </View>
                                    <View style={{
                                        height: 25,
                                        marginLeft: 10,
                                        marginRight: 10,
                                        paddingBottom: 5,
                                        justifyContent: "flex-end"
                                    }}>
                                        <Text style={[{fontSize: 13, color: "#777"}]}>
                                            月销 100
                                        </Text>
                                    </View>
                                    <View style={{
                                        height: 35,
                                        marginLeft: 10,
                                        marginRight: 10,
                                        paddingBottom: 10,
                                        justifyContent: "flex-end"
                                    }}>
                                        <View style={{flexDirection: 'row'}}>
                                            <View style={{
                                                flex: 1,
                                                height: 25,
                                                flexDirection: 'row',
                                                alignItems: 'center',
                                                justifyContent: 'flex-start',
                                                textAlign: 'center'
                                            }}>

                                                <Text style={[{fontSize: 12, color: "#f43"}]}>
                                                    券后
                                                </Text>
                                                <Text style={[{fontSize: 10, color: "#f43", margin: 2}]}>
                                                    ¥
                                                </Text>

                                                <Text style={[{fontSize: 15, fontWeight: "bold", color: "#f43"}]}>
                                                    1000
                                                </Text>
                                            </View>
                                            <View style={{
                                                flex: 1,
                                                flexDirection: 'row',
                                                alignItems: 'center',
                                                justifyContent: 'flex-end',
                                            }}>
                                                <View style={{
                                                    height: 25,
                                                    borderWidth: 1,
                                                    borderColor: "#f43",
                                                    borderStyle: 'dotted',
                                                    borderRadius: 2,
                                                    justifyContent: 'center',
                                                    alignItems: 'center',
                                                    flexDirection: 'row',
                                                    paddingLeft: 10,
                                                    paddingRight: 10
                                                }}>
                                                    <Text style={{fontSize: 10, color: "#f43"}}>¥</Text>
                                                    <Text
                                                        style={{
                                                            fontSize: 13,
                                                            fontWeight: "bold",
                                                            color: "#f43"
                                                        }}>30券</Text>

                                                </View>
                                            </View>
                                        </View>
                                    </View>
                                    <View style={{
                                        height: 35,
                                        flexDirection: 'row',
                                        justifyContent: "flex-start",
                                        alignItems: 'center',
                                        backgroundColor: '#fffafa'
                                    }}>

                                        <View style={{minHeight: 35, justifyContent: 'center'}}>
                                            <Image
                                                source={{uri: item.avatar}}
                                                style={{
                                                    width: 14,
                                                    height: 14,
                                                    margin: 5,
                                                    borderRadius: 7,
                                                    backgroundColor: "#fa0"
                                                }}/>
                                        </View>
                                        <Text style={[{
                                            paddingLeft: 10,
                                            paddingRight: 10,
                                            maxWidth: Dimensions.get("window").width - 100,
                                            fontSize: 13,
                                            color: "#444",
                                        }]}
                                              onPress={() => alert("旗舰店")}
                                        >旗舰店</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>
                }
                initialNumToRender={12}
                onEndReachedThreshold={0.1}

                onEndReached={(info) => this.getMoreItem()}

                ListHeaderComponent={() =>

                    <View style={{
                        flex: 1, backgroundColor: "#fff"
                    }}>
                        <View
                            style={{
                                minHeight: 0,
                                maxHeight: 500,
                                borderBottomWidth: 1,
                                borderBottomColor: "#eeeeee",
                                paddingBottom: 10,
                            }}>
                            <FlatList
                                // horizontal={true}
                                numColumns={4}
                                data={this.state.categoryList}
                                renderItem={({item}) =>
                                    <View style={{
                                        flex: 0.25,
                                        backgroundColor: "#fff",
                                        justifyContent: 'center',
                                        alignItems: 'center'
                                    }}>
                                        <Image source={{uri: item.pic}}
                                               style={{
                                                   width: 40,
                                                   height: 40,
                                                   margin: 5,
                                                   backgroundColor: "#fa0"
                                               }}/>
                                        <Text style={{fontSize: 12}}>{item.name}</Text>
                                    </View>
                                }
                            >
                            </FlatList>
                        </View>
                        <ScrollableTabView
                            style={{backgroundColor: "#fff", borderBottomColor: "#feffef"}}
                            renderTabBar={() => <DefaultTabBar/>}
                            tabBarUnderlineStyle={{backgroundColor: "#f50"}}
                            tabBarActiveTextColor="#f50"
                        >
                            <View tabLabel='最新'/>
                            <View tabLabel='销量'/>
                            <View tabLabel='价格'/>
                        </ScrollableTabView>

                    </View>
                }
            />
        )
    };


    getMoreItem = () => {
        let newItem = [
            {
                avatar: "https://img.alicdn.com/bao/uploaded/TB264NtXczfFuJjy0FhXXbxmFXa_!!412012196.jpg_360x360xzq90.jpg",
                nickname: "苹果青春版 XR",
                lastMessage: "苹果A12处理器，超强性能",
            },
            {
                avatar: "https://img.alicdn.com/imgextra/i1/2048300029/O1CN011C5JxFgzIcCSAv1_!!2048300029-0-beehive-scenes.jpg_360x360xzq90.jpg",
                nickname: "吧台",
                lastMessage: "今天读书了吗？",
            },
            {
                avatar: "https://gw.alicdn.com/bao/uploaded/i2/TB1MwTVKXXXXXbeXXXXXXXXXXXX_!!0-item_pic.jpg",
                nickname: "手柄",
            },
            {
                avatar: "https://gw.alicdn.com/bao/uploaded/i2/39679162/TB2Ap5HjY_I8KJjy1XaXXbsxpXa_!!39679162.jpg",
                nickname: "电台",
            },
            {
                avatar: "https://gw.alicdn.com/bao/uploaded/i4/102278209/TB2CHdPabFlpuFjy0FgXXbRBVXa_!!102278209.jpg",
                nickname: "冰冷主机",
            }];
        let newList = [].concat(this.state.itemList).concat(newItem);
        console.log("已加载更多数据");
        this.setState({itemList: newList});
    }
}

